<!-- 修改公告 -->
<template>
  <div class="modify-announcement">
    <el-dialog
      width="800px"
      class=""
      title="修改"
      :visible="$store.state.dialog.modifyAnnouncement"
      @close="close">
      <el-form :model="announcementFrom" :rules="rules" ref="announcementFrom" label-width="110px" size="mini">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="announcementFrom.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <quill-editor
            v-model="announcementFrom.content"
            ref="myQuillEditor"
            :options="editorOption">
          </quill-editor>
          <!-- <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入公告内容"
            v-model="announcementFrom.content">
          </el-input> -->
        </el-form-item>
        <el-form-item label="公告有效时间" prop="validTime">
          <el-date-picker
            v-model="announcementFrom.validTime"
            type="datetime"
            value-format="yyyy/MM/dd HH:mm:ss"
            placeholder="选择有效时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getMessage()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updNotice
} from '../api/message'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  props: {
    myNotice: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      editorOption: {},
      announcementFrom: {},
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        validTime: [
          { required: true, message: '请选择公告有效时间', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    '$store.state.dialog.modifyAnnouncement' (value) {
      if (value) {
        this.announcementFrom = JSON.parse(this.myNotice)
      }
    }
  },
  methods: {
    // 修改公告
    async getMessage () {
      const res = await updNotice({
        title: this.announcementFrom.title, // 公告标题
        content: this.announcementFrom.content, // 公告内容
        validTime: this.announcementFrom.validTime,
        id: this.announcementFrom.id // 公告编号
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: res.msg,
          type: 'success'
        })
        this.$parent.getTableData(1, 15) // 调用父组件
        this.$store.commit('hide_modify_announcement')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 关闭
    close () {
      this.$store.commit('hide_modify_announcement')
    }
  }
}
</script>

<style lang="less">
</style>
